<style lang="less">
</style>

<template>
<div>
 <Card>  
        <p slot="title">
            <Icon type="navicon-round"></Icon>
            内容管理
        </p>
        <row>
            <i-col span="6">
    <Button-group>
        <Button @click="editXinxi(0)">添加</Button>
        <Button @click="saveordnum">保存排序</Button>
        <Button @click="delduo">批量删除</Button>
    </Button-group></i-col>
            <i-col span="4">
                <i-Select v-model="pageinfo.classid" @on-change="categorychange">
                    <Option v-for="item in categorys" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                </i-Select>
            </i-col>            
            <i-col span="7">
                &nbsp;
            </i-col>      
            <i-col span="7">
                <i-Input v-model="pageinfo.key">
                    <Button slot="append" icon="ios-search" @click="init"></Button>
                </i-Input>
            </i-col>
        </row>
    <div style="margin-top:10px"></div>
    <i-table :columns="cols" :data="data" stripe @on-selection-change="setselect" @on-sort-change="setorder" ></i-table>
    
    <div style="margin-top:10px; text-align:center">
    <Page :total="pageinfo.total" :page-size="pageinfo.pagesize" show-sizer @on-change="pagechange" @on-page-size-change="pagesizechange"></Page></div>
    </Card>
            <Modal title="查看图片" v-model="visible">
                <img :src="imgName" v-if="visible" style="width: 100%">
            </Modal>
    </div>
</template>

<script>
import api from '../../libs/api';
export default {
    name: 'content_article',
    data () {
        return {
            cols:[
                    {
                        type: 'selection',
                        width: 35,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'ID',
                        width:70,                        
                        sortable:'custom'
                    },
                    {
                        title: '预览',
                        key: 'preurl',
                        width:68,
                        align:'center',
                        render:(h,params)=>{
                            return h('a',{
                                attrs:{href:'/article/'+params.row.ID,target:'_blank'},
                            },'(预览)')
                        }
                    },
                    {
                        title: '文章标题',
                        key: 'title',
                        align:'left',                        
                        sortable:'custom',
                        render:(h,params)=>{
                            return h('Button',
                                        {
                                            props: {
                                                type: 'text',//无边框，像文字格式
                                                size: 'small',
                                            },
                                            on: {
                                                click: () => {            
                                                    this.editXinxi(params.row.ID);
                                                }
                                            }
                                        },
                                        params.row.title)
                        }
                    },{
                    title: '图片',
                    key: 'pic',
                    align:'left',  
                    width:60,                  
                    render:(h,params)=>{
                        return h('img',{
                            attrs:{src:params.row.pic,width:"20px",height:"20px"},
                            on:{
                                'click':(event)=>{
                                    this.handleView(params.row.pic)
                                }
                            }
                        },'(预览)')
                    }
                },
                    {
                        title: '类目',
                        key: 'ctitle',                        
                        sortable:'custom',
                        align:'center',
                        width:85,    
                        render:(h,params)=>{
                            return h('i-button',{
                                props:{
                                    type:'text',
                                },
                                on:{
                                    click:(event)=>{
                                        this.categorychange(params.row.classid);
                                    }
                                }
                            },params.row.ctitle)
                        }
                    },
                    {
                    title: '排序',
                    key: 'ordnum',
                    align:'center',
                    width:80,                        
                    sortable:'custom',
                    render:(h,params)=>{
                        return h('Input',{
                            props:{
                                value:params.row.ordnum
                            },
                            on:{
                                'on-blur':(event) => {
                                    this.data[params.index].ordnum = event.target.value;
                                }
                            },
                        })
                    }
                },
                    {
                        title: '发布时间',
                        key: 'addtime',
                        align:'center',
                        width:'100px',                        
                        sortable:'custom',
                    },
                    {
                        title: '更新时间',
                        key: 'updatetime',
                        align:'center',                        
                        sortable:'custom',
                        width:'100px'
                    },
                    {
                        title: '状态',
                        key: 'flag',
                        align:'center',    
                        width:'96px',
                        render:(h,params)=>{
                            var tjtype='primary';
                            var zdype='ghost';
                            var rmtype='ghost';
                            if(params.row.flag==undefined){
                                params.row.flag='';
                            }
                            var flags=params.row.flag.split(',');
                            tjtype=flags.indexOf('n')>-1?"primary":"text";
                            zdype=flags.indexOf('t')>-1?"primary":"text";
                            rmtype=flags.indexOf('h')>-1?"primary":"text";
                            return h('div',[
                                h('i-button',{
                                    props:{type:tjtype,icon:"star",shape:"circle"},
                                    attrs:{title:"推荐",style:"font-size:12px;width:16px;height:16px;line-height:16px;margin:0 2px;"},
                                    on:{click:()=>{
                                        this.saveflag("n",params.row);}}
                                }),
                                h('i-button',{
                                    props:{type:zdype,icon:"arrow-up-a",shape:"circle"},
                                    attrs:{title:"置顶",style:"font-size:12px;width:16px;height:16px;line-height:16px;margin:0 2px;"},
                                    on:{click:()=>{
                                        this.saveflag("t",params.row);}}
                                }),
                                h('i-button',{
                                    props:{type:rmtype,icon:"fireball",shape:"circle"},
                                    attrs:{title:"热门",style:"font-size:12px;width:16px;height:16px;line-height:16px;margin:0 2px;"},
                                    on:{click:()=>{
                                        this.saveflag("h",params.row);}}
                                })
                            ])
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',  
                        width:'120px',
                        render: (h, params) => {
                            return h('div',
                                [
                                    h('Button',
                                        {
                                            props: {
                                                //type: 'text',//无边框，像文字格式
                                                size: 'small',
                                            },
                                            on: {
                                                click: () => {            
                                                    this.editXinxi(params.row.ID);
                                                }
                                            }
                                        },
                                        '编辑'),
                                        h('span',' '),
                                    h('Button',
                                        {
                                            props: {
                                                //type: 'text',//无边框，像文字格式
                                                size: 'small',
                                            },
                                            on: {
                                                click: () => {
                                                    this.delxinxi(params.index);
                                                }
                                            }
                                        },
                                        '删除')
                                ])
                        }
                    }],
            
            data:[],
            pageinfo:{page:1,pagesize:20,total:0,order:"ordnum",esc:"desc",key:'',classid:0},            
            categorys:[],
            imgName: '',
            visible: false,
        };
    },
    methods:{
        pagesizechange(pagesize){
            this.pageinfo.pagesize=pagesize;
            this.init();
        },
        pagechange(page){
            this.pageinfo.page=page;
            this.init();
        },
        saveflag(f,row){
            var vm=this;
            if(row.flag==undefined){
                row.flag='';
            }
            if(row.flag.split(',').indexOf(f)>-1){                
                var flags=row.flag.split(',');
                flags.splice(row.flag.split(',').indexOf(f),1);
                row.flag=flags.toString();
            }
            else{
                var flags=row.flag.split(',');                
                if(row.flag=='')
                    flags=[f];
                else
                    flags.push(f);
                row.flag=flags.toString();
            }
            api.post("/xinxi/saveflag",row).then(function(res){
                if(res.data.code==200){
                }
                else{
                    vm.$Message.error("操作失败");
                }
                vm.init();
            })
        },
        handleView (src) {
            this.imgName = src;
            this.visible = true;
        },
        categorychange(id){
            this.$router.push({name:"content_article",query:{classid:id}});
        },
        setorder(column){
            if(column.order=="normal"){
            this.pageinfo.order="ordnum";
            this.pageinfo.esc="desc";
            }
            else{
            this.pageinfo.order=column.key;
            this.pageinfo.esc=column.order;
            }
            this.init();
        },
        delxinxi(index){
            var vm=this;            
            api.post("/xinxi/del?id="+vm.data[index].ID).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success(res.data.msg);
                }
                else{
                    vm.$Message.error(res.data.msg);
                }
                vm.init();
            })
        },
        setselect(selection){
            this.selectdata=selection;
        },
        saveordnum(){
            var vm=this;
            api.post("/xinxi/saveordnum",this.data).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success("排序完成！");
                }
                else{
                    vm.$Message.error("排序失败！");
                }
                vm.init();
            })
        },
        delduo(){
            var vm=this; 
            api.post("/xinxi/delall",{data:this.selectdata}).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success("删除成功！");
                }
                vm.init();
            })
        },
        editXinxi(id){                                          
            let query = {ID:id};
            this.$router.push({
                name: 'content_articleadd',
                query: query
            });  
        },
        getcategorys(callback){
            var vm=this;
            api.get("/category/gettree").then(function(res){            
                var clist=res.data.msg;
                vm.categorys=[{ID:0,title:"全部内容"}];
                for(var item in clist){
                    vm.categorys.push(clist[item]);
                    if(clist[item].children.length>0){
                        var cchild=clist[item].children;
                        for(var citem in cchild){
                            cchild[citem].title="　|-"+cchild[citem].title;
                            vm.categorys.push(cchild[citem]);
                            if(cchild[citem].children.length>0){
                                var c2child=cchild[citem].children;                                
                                for(var c2item in c2child){
                                    c2child[c2item].title="　　|-"+c2child[c2item].title;
                                    vm.categorys.push(c2child[c2item]);
                                }
                            }
                        }
                    }
                }
                callback();
            })
        },
        getxinxi(){
            if(this.$route.query.classid>0){
                this.pageinfo.classid=this.$route.query.classid;
            }
            var vm=this;
            api.post("/xinxi/getlist?t="+new Date().getSeconds(),this.pageinfo).then(function(res){
                vm.data=res.data.msg.Items;
                vm.pageinfo.total=res.data.msg.TotalItems;
            })
        },
        init(){
            this.getcategorys(this.getxinxi);
        }
    },
    created(){
        this.init();
    },
    watch: {
        '$route' () {
            this.init();
        }
    }
};
</script>
